<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HyperTool</title>
<style type="text/css">
	#btns{
		margin: 10px 0 0 479px;
	}
	.btn{
		background-color: #FFFFFF;
		background: none;
		color: #555555;
	    font-family: "Trebuchet MS", Arial,Helvetica Neue,Helvetica,sans-serif;
	    font-size: 18px;
	    font-weight: bold;
	    border: medium none;
	    padding: 0;
	    cursor: pointer;
	}
	
	.btn_active {
		color: black;
	}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	function changeImgs(bb){
		var img_left = document.getElementById('img_left');
		var img_right = document.getElementById('img_right');
		
		switch(bb){
			case 25:
				img_left.src = "img/25bbip.png";
				img_right.src = "img/25bboop.png";
				break;
			case 20:
				img_left.src = "img/20bbip.png";
				img_right.src = "img/20bboop.png";
				break;
			case 15:
				img_left.src = "img/15bbip.png";
				img_right.src = "img/15bboop.png";
				break;
			case 12:
				img_left.src = "img/12bbip.png";
				img_right.src = "img/12bboop.png";
				break;
			case 8:
				img_left.src = "img/nashshove.png";
				img_right.src = "img/nashcall.png";
				break;
			case 0:
				img_left.src = "img/call.png";
				img_right.src = "img/mersreshove.png";
			default:
				break;
		}
	}
	$("document").ready(function(){
		$(".btn").click(function(){
			$(".btn").each(function(){
				if($(this).hasClass("btn_active"))
					$(this).removeClass("btn_active");
			});
			$(this).addClass("btn_active");
		});
	});	
</script>
</head>
<body>
	<img id="img_left" width="619px" height="309px" src="img/25bbip.png"/>
	<img id="img_right" width="619px" height="309px" src="img/25bboop.png"/>
	<div id="btns">
		<button class="btn" onclick="changeImgs(0)">Call</button>
		<button class="btn btn_active" onclick="changeImgs(25)">25 BB</button>
		<button class="btn" onclick="changeImgs(20)">20 BB</button>
		<button class="btn" onclick="changeImgs(15)">15 BB</button>
		<button class="btn" onclick="changeImgs(12)">12 BB</button>
		<button class="btn" onclick="changeImgs(8)">Nash</button>
	</div>
</body>
</html>